{extend name="property/public/insidePageBase" /}
{block name="title"}设备详情{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本概况</li>
                <li>日用量</li>
                <li>储值记录</li>
                <li>日志记录</li>
                <li>操作记录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show  layui-form-pane">
                    <!--基本概况 add-->
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-form-item">
                                <div class="layui-inline is-rose">
                                    <div class="layui-input-group">
                                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;设备编号&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                        <input type="text" disabled value="{$meterInfo['energy_no']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">{if $meterInfo.wit_type == 1} 智能表 {elseif $meterInfo['wit_type'] == 2 /} 普通表{else/}  --  {/if}</div>
                                        <div class="layui-input-split layui-input-suffix">【 {$meterInfo['beilv']??''} 倍】</div>
                                        <div class="layui-input-split layui-input-suffix">{if $meterInfo.device_status == 1} 运行中 {elseif $meterInfo['device_status'] == 2 /} 己停止{else/}  --  {/if}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div class="layui-form-item">
                                <label class="layui-form-label">安装地址</label>
                                <div class="layui-input-block">
                                    <input type="text" value="{$meterInfo['energy_name']??''}" disabled lay-verify="require" autocomplete="off"  class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs8">
                            <div class="layui-form-item">
                                <div class="layui-inline is-rose">
                                    <div class="layui-input-group">
                                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;上期底数&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                        <div class="layui-input-split layui-input-prefix">总</div>
                                        <input type="text" disabled value="{$meterInfo['base_z']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">尖</div>
                                        <input type="text" disabled value="{$meterInfo['base_j']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">峰</div>
                                        <input type="text" disabled value="{$meterInfo['base_f']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">平</div>
                                        <input type="text" disabled value="{$meterInfo['base_p']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">谷</div>
                                        <input type="text" disabled value="{$meterInfo['base_g']??''} " autocomplete="off"  class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <div class="layui-form-item">
                                <label class="layui-form-label">结算日期</label>
                                <div class="layui-input-block">
                                    <input type="text" value="{$meterInfo['base_date']??'--'}" disabled lay-verify="require" autocomplete="off"  class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs8">
                            <div class="layui-form-item">
                                <div class="layui-inline is-rose">
                                    <div class="layui-input-group">
                                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;最新读数&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                        <div class="layui-input-split layui-input-prefix">总</div>
                                        <input type="text" disabled value="{$meterInfo['read_z']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">尖</div>
                                        <input type="text" disabled value="{$meterInfo['read_j']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">峰</div>
                                        <input type="text" disabled value="{$meterInfo['read_f']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">平</div>
                                        <input type="text" disabled value="{$meterInfo['read_p']??''} " autocomplete="off"  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix">谷</div>
                                        <input type="text" disabled value="{$meterInfo['read_g']??''} " autocomplete="off"  class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <div class="layui-form-item">
                                <label class="layui-form-label">抄读时间</label>
                                <div class="layui-input-block">
                                    <input type="text" value="{$meterInfo['read_time']??''}" disabled lay-verify="require" autocomplete="off"  class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="layui-row">
                        <div class="layui-col-xs4">
                            <div class="layui-form-item">
                                <label class="layui-form-label">归属物业</label>
                                <div class="layui-input-block">
                                    <input type="text" value="{$meterInfo['property_name']??''}"  disabled lay-verify="require" autocomplete="off"  class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs8">
                            <div class="layui-form-item">
                                <label class="layui-form-label">关联房间</label>
                                <div class="layui-input-block">
                                    <input type="text" value="{$meterInfo['full_room_name']??'--'}"  disabled lay-verify="require" autocomplete="off"  class="layui-input">
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="layuimini-main" id="app">
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <form class="layui-form layui-form-pane" action="">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">按日期筛选</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="time" id="time" autocomplete="off" class="layui-input" placeholder="请选择日期区间">
                                                </div>
                                                <button type="button" @click="searchData.time = 'week'" :class="'layui-btn '+ (searchData.time == 'week' ? 'layui-btn-normal' : 'layui-btn-primary')" data-val="week" style="height: 40%;">近七天</button>
                                                <button type="button" @click="searchData.time = 'month'" :class="'layui-btn '+ (searchData.time == 'month' ? 'layui-btn-normal' : 'layui-btn-primary')" data-val="month" style="height: 40%;">本月</button>
                                                <button type="button" @click="searchData.time = 'prevMonth'" :class="'layui-btn '+ (searchData.time == 'prevMonth' ? 'layui-btn-normal' : 'layui-btn-primary')" data-val="prevMonth" style="height: 40%;">上月</button>
                                            </div>
                                            <div class="layui-inline">
                                                {if $meterInfo['wit_type'] == 2}
                                                    {if $copyReadMeterAuth}<button type="button" class="layui-btn layui-btn-normal dayCopyToRead"> 人工抄读 </button>{/if}
                                                {/if}
                                                {if $meterInfo['wit_type'] == 1}
                                                    {if $readMeterAuth}<button type="button" class="layui-btn layui-btn-normal autoReadCopy"> 实时抄读 </button>{/if}
                                                    {if $onMeterAuth}<button type="button" class="layui-btn onEnergyMeter"> 合闸 </button>{/if}
                                                    {if $offMeterAuth}<button type="button" class="layui-btn layui-btn-danger offEnergyMeter"> 拉闸 </button>{/if}
                                                    {if $updateMeterAuth}<button type="button" class="layui-btn layui-btn-normal updateOnOff"> 更新 </button>{/if}
                                                {/if}
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--基本概况 add-->
                </div>
                <div class="layui-tab-item">
                    <!--日用量 add-->
                    <table class="layui-hide" id="meterDayList" lay-filter="meterDayList"></table>
                    <!--日用量 end-->
                </div>
                <div class="layui-tab-item">
                    <!--储值记录 add-->
                    <table class="layui-hide" id="energyMoneyLogList" lay-filter="energyMoneyLogList"></table>
                    <script type="text/html" id="money-log-amount_tpl">
                        {{# if(d.log_type === 1) { }}<span style="color: red;">+ {{d.amount}}</span>{{# } }}
                        {{# if(d.log_type === 2) { }}<span style="">- {{d.amount}}</span>{{# } }}
                        {{# if(d.log_type === 3) { }}<span style="color: #0000FF;">- {{d.amount}}</span>{{# } }}

                    </script>
                    <script type="text/html" id="money-log-remark_tpl">
                        {{# if(d.log_type === 1) { }}<span class="layui-badge layui-bg-orange">充值</span>{{# } }}
                        {{# if(d.log_type === 2) { }}<span class="layui-badge layui-bg-green">扣款</span>{{# } }}
                        {{# if(d.log_type === 3) { }}<span class="layui-badge layui-bg-badge">退款</span>{{# } }}
                        {{# if(d.remark) { }}{{d.remark}}{{# } }}
                    </script>
                    <!--储值记录 end-->
                </div>
                <div class="layui-tab-item">
                    <!--日志记录 add-->
                    <table class="layui-hide" id="meterLogList" lay-filter="meterLogList"></table>
                    <script type="text/html" id="meter_log_uid_tpl">
                        {{# if(d.username) { }} {{d.username}} {{# }else{ }}{{d.nickname}} {{# } }}
                    </script>
                    <!--日志记录 end-->
                </div>
                <div class="layui-tab-item">
                    <!--操作日志 add-->
                    <table class="layui-hide" id="operateLogLogList" lay-filter="operateLogLogList"></table>
                    <script type="text/html" id="operate_log_uid_tpl">
                        {{# if(d.username) { }} {{d.username}} {{# }else{ }}{{d.nickname}} {{# } }}
                    </script>
                    <script type="text/html" id="ele_opt_status_tpl">
                        {{# if(d.status == 1) { }}
                        <span class="layui-badge layui-bg-gray">执行中</span>
                        {{# }else if(d.status == 9) { }}
                        <span class="layui-badge layui-bg-blue">执行成功</span>
                        {{# }else if(d.status == 2) { }}
                         <span class="layui-badge layui-bg-green">执行成功</span>
                        {{# }else if(d.status == 7) { }}
                        <span class="layui-badge">取消执行</span>
                        {{# } }}
                    </script>
                    <script type="text/html" id="operate_type_tpl">
                        {{# if(d.operate_type == 'on') { }}
                        <span class="layui-badge layui-bg-blue">合闸</span>
                        {{# }else if(d.operate_type == 'off') { }}
                        <span class="layui-badge">拉闸</span>
                        {{# }else if(d.operate_type == 'call_reading') { }}
                        <span class="layui-badge layui-bg-green">抄表读数</span>
                        {{# }else if(d.operate_type == 'call_status') { }}
                        <span class="layui-badge layui-bg-green">状态更新</span>
                        {{# }else if(d.operate_type == 'open_reading') { }}
                        <span class="layui-badge layui-bg-green">创建更新</span>
                        {{# } }}
                    </script>
                    <!--操作日志 end-->
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/html" id="reading_tpl">
    <table class="layui-table">
        <tr>
            <td>电表读数</td>
            <td>{{d.read[0]}}</td>
        </tr>
        <tr>
            <td>尖</td>
            <td>{{d.read[1]}}</td>
        </tr>
        <tr>
            <td>峰</td>
            <td>{{d.read[2]}}</td>
        </tr>
        <tr>
            <td>平</td>
            <td>{{d.read[3]}}</td>
        </tr>
        <tr>
            <td>谷</td>
            <td>{{d.read[4]}}</td>
        </tr>
    </table>
</script>
{/block}
{block name="js"}
{__block__}
{js href="/static/common/js/vue.min.js" /}
<script>
    let energyId = {$meterInfo['id']??'0'};
    layui.use(['laydate','echarts','table','notice','laytpl'], function () {
        var laydate = layui.laydate
        echarts = layui.echarts
        table = layui.table
        notice = layui.notice
        laytpl = layui.laytpl
        laydate.render({
            elem: document.getElementById('time')
            ,type: 'date'
            ,range: true
            ,done: (value, date, endDate) => {
                app.searchData.time = value
            }
        });

        // 日用量统计 add
        var tableIdMeterDay = 'meterDayList';
        table.render({
            elem: '#'+tableIdMeterDay,
            id:tableIdMeterDay,
            url: '{:url("propertyEnergyMeterDayList")}?energy_id='+energyId,
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'day_time', width: 108,title: '年-月-日', sort: true},
                {field: 'use_num_z', width: 118,title: '用量（总）', sort: true},
                {field: 'use_num_j', width: 118,title: '用量（尖）', sort: true},
                {field: 'use_num_f', width: 118,title: '用量（峰）', sort: true},
                {field: 'use_num_p', width: 118,title: '用量（平）', sort: true},
                {field: 'use_num_g', minWidth: 118,title: '用量（谷）', sort: true},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120'
        });
        // 日用量统计 end

        // 储值记录 add
        var tableIdMoneyLog = 'energyMoneyLogList';
        table.render({
            elem: '#'+tableIdMoneyLog,
            id:tableIdMoneyLog,
            url: '{:url("propertyEnergyBalanceLogList")}?energy_id='+energyId,
            cols: [[
                {field: 'add_time', width: 168, title: '创建时间', sort: true},
                {field: 'amount', width: 108, title: '变动金额', sort: true, templet:'#money-log-amount_tpl'},
                {field: 'after_change', width: 118, title: '变动后余额', sort: true},
                {field: 'remark', minWidth: 100, title: '备注说明', templet:'#money-log-remark_tpl'},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120'
        });
        // 储值记录 end
        // 电表日志 add
        var tableIdMeterLog = 'meterLogList';
        table.render({
            elem: '#'+tableIdMeterLog,
            id:tableIdMeterLog,
            url: '{:url("propertyEnergyMeterLogList")}?energy_id='+energyId,
            cols: [[
                {field: 'add_time', width: 168, title: '创建时间', sort: true},
                {field: 'username', width: 128, title: '执行用户',  sort: true, templet:'#meter_log_uid_tpl'},
                {field: 'remark', minWidth: 100, title: '备注说明'},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120'
        });
        // 电表日志 end
        $('.dayCopyToRead').on('click', function() {
            var url = '{:url("propertyEnergyMeterDayManuallyCopy")}?energy_id='+energyId;
            var index = layer.open({
                title: '{$meterInfo['energy_no']} 设备用量抄读', type: 2,  shade: 0.2, maxmin:true, area: ['680px', '500px'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            layer.close(loadAdd);
                            if (res.code === 0) {
                                layer.close(index);
                                parent.layer.msg(res.msg, {icon: 6, offset: '15px',time: 1000}, function() {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
        });

        <!--状态更新-->
        $('.updateOnOff').on('click', function() {
            var url = '{:url("propertyEnergyMeterUpdateOnOff")}';
            layer.prompt({ formType: 2, value: '',title: '请输入操作说明'
            }, function(value, index, elem){
                var loadAdd = layer.msg('操作中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                $.post(url, {id: {$meterInfo['id']},type: 'call_status',remark:value}, function (res) {
                    if (res.code === 0) {
                        layer.close(index);
                        var time = Date.now() / 1000;
                        var jincheng = setInterval(function() {
                            $.get("{:url('propertyEnergyMeterOperateQueryResult')}", {request_id: res.data.request_id}, function (res) {
                                if (res.code === 0) {
                                    if(res.data && res.data.status  !== 1){
                                        layer.close(loadAdd);
                                        clearInterval(jincheng);
                                        if(res.data.status === 9) {
                                            if(res.data.result_content.code == 200 && res.data.result_content.data.status == 1 && res.data.result_content.data.response.messageType == '电表运行状态') {
                                                notice.success("查询成功");
                                                if(res.data.result_content.data.response.messageData.status == '通') {
                                                    notice.info("通电状态");
                                                } else {
                                                    notice.info("断电状态");
                                                }
                                            } else {
                                                notice.error("查询失败");
                                            }
                                        } else {
                                            notice.error("操作失败");
                                            notice.error(res.data.fail_desc);
                                        }
                                    }
                                }
                            });
                        }, 1500);
                    } else {
                        layer.close(loadAdd);
                        notice.error(res.msg);
                    }
                });
            });
        });
        <!--电表拉闸 offElectric-->
        $('.offEnergyMeter').on('click', function() {
            var url = '{:url("propertyEnergyMeterOff")}';
            layer.prompt({ formType: 2, value: '', title: '请输入断电说明'
            }, function(value, index, elem){
                var loadAdd = layer.msg('操作中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                $.post(url, {id: {$meterInfo['id']},type: 'off',remark:value}, function (res) {
                    if (res.code === 0) {
                        layer.close(index);
                        var time = Date.now() / 1000;
                        var jincheng = setInterval(function() {
                            $.get("{:url('propertyEnergyMeterOperateQueryResult')}", {request_id: res.data.request_id}, function (res) {
                                if (res.code === 0) {
                                    if(res.data && res.data.status  !== 1){
                                        layer.close(loadAdd);
                                        clearInterval(jincheng);
                                        if(res.data.status === 9) {
                                            if(res.data.result_content.code == 200 && res.data.result_content.data.status == 1 && res.data.result_content.data.response.messageType == '阀控成功') {
                                                notice.success("断电成功");
                                            } else {
                                                notice.error("断电失败");
                                            }
                                        } else {
                                            notice.error("操作失败");
                                            notice.error(res.data.fail_desc);
                                        }
                                    }
                                }
                            });
                        }, 1500);
                    } else {
                        layer.close(loadAdd);
                        notice.error(res.msg);
                    }
                });
            });
        });
        <!--电表合闸  onElectric-->
        $('.onEnergyMeter').on('click', function() {
            var url = '{:url("propertyEnergyMeterOn")}';
            layer.prompt({
                formType: 2,
                value: '',
                title: '请输入通电说明'
            }, function(value, index, elem){
                var loadAdd = layer.msg('操作中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                $.post(url, {id: {$meterInfo['id']},type: 'on',remark:value}, function (res) {
                    if (res.code === 0) {
                        layer.close(index);
                        var time = Date.now() / 1000;
                        var jincheng = setInterval(function() {
                            $.get("{:url('propertyEnergyMeterOperateQueryResult')}", {request_id: res.data.request_id}, function (res) {
                                if (res.code === 0) {
                                    if(res.data && res.data.status  !== 1){
                                        layer.close(loadAdd);
                                        clearInterval(jincheng);
                                        if(res.data.status === 9) {
                                            if(res.data.result_content.code == 200 && res.data.result_content.data.status == 1 && res.data.result_content.data.response.messageType == '阀控成功') {
                                                notice.success("通电成功");
                                            } else {
                                                notice.error("通电失败");
                                            }
                                        } else {
                                            notice.error("操作失败");
                                            notice.error(res.data.fail_desc);
                                        }
                                    }
                                }
                            });
                        }, 1500);
                    } else {
                        layer.close(loadAdd);
                        notice.error(res.msg);
                    }
                });
            });
        });
        <!--实时抄读  readElectric-->
        $('.autoReadCopy').on('click', function() {
            var url = '{:url("propertyEnergyMeterAutoReadCopy")}';
            layer.prompt({ formType: 2, value: '', title: '请输入备注说明'
            }, function(value, index, elem){
                var loadAdd = layer.msg('操作中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                $.post(url, {id: {$meterInfo['id']},type: 'call_reading',remark:value}, function (res) {
                    if (res.code === 0) {
                        layer.close(index);
                        var time = Date.now() / 1000;
                        var jincheng = setInterval(function() {
                            $.get("{:url('propertyEnergyMeterOperateQueryResult')}", {request_id: res.data.request_id}, function (res) {
                                if (res.code === 0) {
                                    if(res.data && res.data.status  !== 1){
                                        layer.close(loadAdd);
                                        clearInterval(jincheng);
                                        if(res.data.status === 9) {
                                            if(res.data.result_content.code == 200 && res.data.result_content.data.status == 1 && res.data.result_content.data.response.messageType == '正向有功') {
                                                notice.success("查询成功");
                                                laytpl(reading_tpl.innerHTML).render(res.data.result_content.data.response.messageData, function(html){
                                                    layer.open({ title:'最新读数', content:html,btn:false });
                                                });
                                            } else {
                                                notice.error("查询失败");
                                            }
                                        } else {
                                            notice.error("操作失败");
                                            notice.error(res.data.fail_desc);
                                        }
                                    }
                                }
                            });
                        }, 1500);
                    } else {
                        layer.close(loadAdd);
                        notice.error(res.msg);
                    }
                });
            });
        });
        // 电表操作记录
        table.render({
            elem: '#operateLogLogList',
            id:'operateLogLogList',
            url: '{:url("propertyEnergyOperateLogList")}?energy_id='+energyId,
            toolbar: false,
            cols: [[
                {field: 'username', width: 128, title: '执行用户',  sort: true, templet:'#operate_log_uid_tpl'},
                {field: 'operate_type', width:100, title: '操作类型', templet:'#operate_type_tpl'},
                {field: 'remark', minWidth:150, title: '备注'},
                {field: 'status', width:90, title: '执行状态', templet:'#ele_opt_status_tpl'},
                {field: 'add_time', width:168, title: '操作时间', fixed: 'right'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-120',
            done: function(res, curr, count) {
                if(res.data) {
                    res.data.forEach(function(item,index){
                        if(item.status == 2) {
                            $('div[lay-id="operateLogLogList"]').find('tr[data-index="'+index+'"]').find('.laytable-cell-6-0-4').hover(function() {
                                layer.tips(item.fail_desc, $(this), {
                                    tips:1,
                                    time: 0
                                });
                            }, function(){
                                layer.closeAll('tips')
                            })
                        }
                    })
                }
            }
        });
    })
</script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dayDataList: [],
            searchData: {
                time: ''
            },
            useNumTotal: 0,
            tableShow: false
        },
        created() {
            setTimeout(()=> {
                this.getDayData();
            }, 100)
        },
        watch: {
            searchData: {
                handler() {
                    this.getDayData();
                },
                deep: true
            }
        },
        methods: {
            getDayData() {
                var url = '{:url("propertyEnergyMeterDetail")}?energy_id='+energyId;
                var loadIndex = layer.load(0, {shade: 0.2});
                $.get(url, this.searchData, (res) => {
                    layer.close(loadIndex);
                    let data = res.data
                    let useNumTotal = 0;
                    data.forEach((item) => {
                        let weeks = new Array( "周日", "周一","周二", "周三","周四", "周五","周六" )
                        var date = new Date(item.day_time)
                        var Y = date.getFullYear() + '-'
                        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
                        var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate());
                        item.add_time = M+D + ' '+weeks[date.getDay()]+' '
                        useNumTotal += parseFloat(item.use_num)
                    })
                    this.useNumTotal = useNumTotal.toFixed(2)
                    this.dayDataList = data
                    this.tableShow = false
                    setTimeout(()=> {
                        this.$nextTick(() => {
                            table.init('dayTable', {
                                height: 'full-430' //设置高度
                                , limit: data.length
                                , done: () => {
                                    this.tableShow = true
                                }
                            });
                        })
                        this.loadChart()
                    }, 100)
                })
            },
            loadChart() {
                let date = []
                let useNumData = []
                let useNumJData = []
                let useNumFData = []
                let useNumPData = []
                let useNumGData = []
                let readNumData = []
                let readNumJData = []
                let readNumFData = []
                let readNumPData = []
                let readNumGData = []
                this.dayDataList.forEach((item) => {
                    date.push(item.add_time)
                    useNumData.push(item.use_num_z)
                    useNumJData.push(item.use_num_j)
                    useNumFData.push(item.use_num_f)
                    useNumPData.push(item.use_num_p)
                    useNumGData.push(item.use_num_g)

                    readNumData.push(item.read_num_z)
                    readNumJData.push(item.read_num_j)
                    readNumFData.push(item.read_num_f)
                    readNumPData.push(item.read_num_p)
                    readNumGData.push(item.read_num_g)
                })
                /**
                 * 报表功能
                 */
                var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
                var optionRecords = {
                    title: {
                        text: '用量统计 Kwh'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            let firstParams = params[0];
                            let dataIndex = params[0].dataIndex;
                            let sndParams = params[1];
                            return firstParams.name + '<br />' +
                                '总：(读数：'+readNumData[dataIndex]+') Kwh，(用量：'+useNumData[dataIndex]+') Kwh' + '<br />' +
                                '尖：(读数：'+readNumJData[dataIndex]+') Kwh，(用量：'+useNumJData[dataIndex]+') Kwh' + '<br />' +
                                '峰：(读数：'+readNumFData[dataIndex]+') Kwh，(用量：'+useNumFData[dataIndex]+') Kwh' + '<br />' +
                                '平：(读数：'+readNumPData[dataIndex]+') Kwh，(用量：'+useNumPData[dataIndex]+') Kwh' + '<br />' +
                                '谷：(读数：'+readNumGData[dataIndex]+') Kwh，(用量：'+useNumGData[dataIndex]+') Kwh';
                        }
                    },
                    legend: {
                        data: ['总', '尖', '峰', '平', '谷'],
                        selected: { //在这里设置就ok了
                            '总': false,
                            '尖': true,
                            '峰': true,
                            '平': true,
                            '谷': true
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '总',
                            type: 'line',
                            data: useNumData
                        },
                        {
                            name: '尖',
                            type: 'line',
                            markPoint: {
                                data: [{ type: "max", name: "峰值" }]
                            },
                            data: useNumJData
                        },
                        {
                            name: '峰',
                            type: 'line',
                            markPoint: {
                                data: [{ type: "max", name: "峰值" }]
                            },
                            data: useNumFData
                        },
                        {
                            name: '平',
                            type: 'line',
                            markPoint: {
                                data: [{ type: "max", name: "峰值" }]
                            },
                            data: useNumPData
                        },
                        {
                            name: '谷',
                            type: 'line',
                            markPoint: {
                                data: [{ type: "max", name: "峰值" }]
                            },
                            data: useNumGData
                        }
                    ]
                };
                echartsRecords.setOption(optionRecords);
                echartsRecords.resize();
                window.onresize = function(){
                    echartsRecords.resize();
                }
            }
        }
    });
</script>
<!--日用量  end-->
{/block}
